<template>
  <div class="notice">
    <div
      class="item"
      v-for="(item, index) in list"
      :key="index"
      @click="toPdf(item.title, item.link)"
    >
      <h1>{{ item.title }}</h1>
      <p>{{ item._pub_time }}</p>
    </div>
    <div
      class="loadMore"
      @click="getNotice"
      v-show="list.length > 19 && !noMore"
    >
      加载更多<i class="icon"></i>
    </div>
  </div>
</template>
<script>
import { getNotice } from "../api/index";
import dayjs from "dayjs";
import { getUrlParams } from "../script/utils";
import {DCP} from "../script/Const";

const { token, productId, userId } = getUrlParams();
export default {
  data() {
    return {
      size: 0,
      noMore: false,
      list: [],
    };
  },
  mounted() {
    this.getNotice();
  },
  methods: {
    async getNotice() {
      await getNotice({
        pageSize: this.size,
        clientCentralToken: token,
      }).then((back) => {
        if (back.status == 1) {
          let data = back.data;
          if (data.length == 0) {
            this.noMore = true;
          } else {
            this.list = this.list.concat(this.handel(data));
          }
          this.size = this.list.length;
        }
      });
    },
    handel(arr) {
      arr.map((item) => {
        item._pub_time = dayjs(item.pub_time).format("YYYY-MM-DD  HH:mm");
        console.log(item._pub_time);
        return item;
      });
      return arr;
    },
    toPdf(title, link) {
        console.log(link,'link===')
        console.log(this.DCP,'DCP')
      const path = DCP + link;
      window.prompt(
        "",
        `up://["open.pdf",${Date.now()},{"title":"${title}","url":"${path}"}]`
      );
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../style/var.scss";

.notice {
  overflow: scroll;
}
.item {
  box-sizing: border-box;
  padding: 10px 36px 20px 16px;
  border-bottom: 1px solid #262831;
  h1 {
    color: #dddfed;
    font-size: 18px;
    font-weight: 400;
    line-height: 38px;
    color: #dddfed;
  }
  p {
    margin-top: 6px;
    color: #979aad;
    font-size: 16px;
  }
  &:hover {
    background: #2c3040;
  }
  &:active {
    background: #1d202e;
  }
}
.loadMore {
  @include flex-center;
  height: 40px;
  background: #1d202e;
  color: #e9cbab;
  font-size: 16px;
  font-weight: 400;
  .icon {
    margin-left: 6px;
    display: inline-block;
    width: 9px;
    height: 10px;
    background: url($PIC_URL + "/tlbypcWeb/extremeLive/down.png") no-repeat;
  }
}
</style>
